<template>
	<view class="jk-page-container bg">
		<jkSearchBar
            :search-val.sync="searchParams.productNameOrCode"
            :searchLeftItemName="searchParams.workshopName"
			:searchRightItemName="'更多筛选'"
            search-left-item-no-data-name="车间"
            search-right-item-no-data-name="更多筛选"
            placeholder="品种编号或名称"
            @search="onSearchBtn"
			@search-left-item="selectWorkshopPopupOptionState = true"
            @search-right-item="moreSearchState = true"
        ></jkSearchBar>
        <!--<u-sticky>
            <view style="background: #fff;padding: 14rpx 24rpx;">
                <u-search
                    v-model="searchParams.productNameOrCode"
                    :inputStyle="{ height: '38px', fontSize: '30rpx' }"
                    shape="round"
                    placeholder="品种编号或名称"
                    height="60rpx"
                    :showAction="true"
                    :clearabled="false"
                    inputAlign="center"
                    :actionStyle="{ color: '#808695', fontSize: '16px' }"
                    @search="onSearchBtn"
                    @clear="onSearchBtn('')"
                    @custom="onSearchBtn"
                ></u-search>
            </view>
        </u-sticky>-->
		<view class="column-list-container">
			<view v-for="(item) in tableData" :key="item.id" class="column-list-item">
                <view @click="onToPrintBtn(item)">
                    <view class="column-list-item-default flex-between-center">
                        <view class="column-list-item-title">{{ item.productName || '' }}</view>
                        <view class="column-list-item-sub-title color1">
                            <!--<u-tag size="default" :type="transferState(item.packageState).type" :text="transferState(item.packageState).name"></u-tag>-->
                        </view>
                    </view>
                    <view class="column-list-item-default column-list-item-sub-title">批号：{{ item.batchCode || '' }}</view>
                    <view class="column-list-item-default column-list-item-sub-title">分类：{{ item.categoryName || '' }}</view>
                    <view class="column-list-item-default column-list-item-sub-title">通知单：{{ item.code || '' }}</view>
                    <view style="background: #f8f8f9;padding: 4rpx 12rpx;border-radius: 12rpx;">
                        <u-row>
                            <u-col :span="6">
                                <view class="column-list-item-default column-list-item-sub-title" style="font-size: 24rpx;margin: 4rpx 0;">纸管：{{ item.productOrderBatchItem && item.productOrderBatchItem.paperTubeList ? item.productOrderBatchItem.paperTubeList.map(x => x.name).join() : '无' }}</view>
                            </u-col>
                            <u-col :span="6">
                                <view class="column-list-item-default column-list-item-sub-title" style="font-size: 24rpx;margin: 4rpx 0;">扎线：{{ item.productOrderBatchItem && item.productOrderBatchItem.bundleList ? item.productOrderBatchItem.bundleList.map(x => x.name).join() : '无' }}</view>
                            </u-col>
                        </u-row>
                        <u-row>
                            <u-col :span="6">
                                <view class="column-list-item-default column-list-item-sub-title" style="font-size: 24rpx;margin: 4rpx 0;">外袋：{{ item.productOrderBatchItem && item.productOrderBatchItem.outerBagList ? item.productOrderBatchItem.outerBagList.map(x => x.name).join() : '无' }}</view>
                            </u-col>
                            <u-col :span="6">
                                <view class="column-list-item-default column-list-item-sub-title" style="font-size: 24rpx;margin: 4rpx 0;">内袋：{{ item.productOrderBatchItem && item.productOrderBatchItem.innerBagList ? item.productOrderBatchItem.innerBagList.map(x => x.name).join() : '无' }}</view>
                            </u-col>
                        </u-row>
                        <u-row>
                            <u-col :span="6">
                                <view class="column-list-item-default column-list-item-sub-title" style="font-size: 24rpx;margin: 4rpx 0;">净重：{{ item.productOrderBatchItem && item.productOrderBatchItem.suttle }}</view>
                            </u-col>
                            <u-col :span="6">
                                <view class="column-list-item-default column-list-item-sub-title" style="font-size: 24rpx;margin: 4rpx 0;">成分：{{ item.productOrderBatchItem && item.productOrderBatchItem.coarseSandList ? item.productOrderBatchItem.coarseSandList.filter(x => x.typeName === '粗纱').map(x => x.productName).join(' ; ') : '无' }}</view>
                            </u-col>
                        </u-row>
                    </view>
                </view>
				<view style="font-weight: 300;margin-top: 20rpx;display: flex;">
                    <!--<u-button v-if="item.packageState === 0" @click="onToggleState(item, 1, '开始包装')" type="text" size="normal">开始包装</u-button>-->
                    <!--<u-button v-if="item.packageState === 1" @click="onToggleState(item, 0, '取消包装')" type="text" size="normal">取消包装</u-button>-->
                    <!--<u-button v-if="item.packageState === 1" @click="onToggleState(item, 2, '包装完成')" type="text" size="normal">包装完成</u-button>-->
                    <!--<u-button v-if="item.packageState === 2" @click="onToggleState(item, 1, '撤销完成')" type="text" size="normal">撤销完成</u-button>-->
                    <u-button @click="onToPrintBtn(item)" type="text" size="normal">打印</u-button>
				</view>
			</view>
			<jk-no-more :pageNo="searchParams.pageNo" :show="isNoMore" />
            <!--<view style="width: 100%;position: fixed;left: 0;bottom: 0;height: 84px;background: #fff;display: flex;justify-content: center;align-items: center;padding: 0 32rpx;box-sizing: border-box;border-top: solid 1px #dcdee2;">
                <u-button @click="onToPrintBtn" type="primary" style="width: 100%;" size="large" icon="scan">扫码入库</u-button>
            </view>-->
		</view>
        <jkPopupOption
            :value="searchParams.workshopId"
            :show="selectWorkshopPopupOptionState"
            :optionList="workshopList"
            :show-all="false"
            @visible-change="(e) => selectWorkshopPopupOptionState = e"
            @confirm="onConfirmOfSelectWorkshop"
        ></jkPopupOption>
        <jkPopupOption
            :value="searchParams.packageState"
            :show="selectPackagePopupOptionState"
            :optionList="packageStateList"
            @visible-change="(e) => selectPackagePopupOptionState = e"
            @confirm="onConfirmOfSelectPackage"
        ></jkPopupOption>
        <more-search
            :popup-state="moreSearchState"
            @close="(e) => moreSearchState = e"
            @confirm="onConfirmOfMoreSearch"
        ></more-search>
	</view>
</template>

<script>
    import {
        productionPrdNoticeNewPage, productionPrdNoticeUpdatePackageState,
    } from "../../../../api";
    import {
        formatDate,
        isLastPage,
        pageConfig,
        showLoading
    } from "../../../../utils/jk-utils";
	import loadingMore from '../../../../mixins/loading-more';
	import jkNoMore from "../../../../jk-components/jk-no-more";
	import jkSearchBar from "../../../../jk-components/jk-search-bar";
    import jkPopupOption from "../../../../jk-components/jk-popup-option";
    import moreSearch from './components/moreSearch';
    export default {
		mixins: [loadingMore],
		components: {
            moreSearch,
            jkPopupOption,
            jkNoMore,
			jkSearchBar,
		},
		data() {
			return {
				apiConfig: {
					list: productionPrdNoticeNewPage
				},
                searchParams: {
					pageNo: 1,
					pageSize: pageConfig.pageSize,
					totalCount: pageConfig.totalCount,
					productNameOrCode: '',
					workshopId: '',
					workshopName: '',
                    belongDate: '',
                    packageState: '',
                    selectItem: true,
                    packageStateName: '',
                    selectUnfinishedOrder: true,
                    ifTest: false
				},
                moreSearchState: false,
                selectWorkshopPopupOptionState: false,
                selectPackagePopupOptionState: false,
				tableData: [],
				workshopList: [],
				packageStateList: [
                    { id: 0, name: '待包装', type: 'info' },
                    { id: 1, name: '包装中', type: 'primary' },
                    { id: 2, name: '包装完成', type: 'success' },
                ]
			}
		},
		onLoad() {
            // this.$set(this.searchParams, 'belongDate', formatDate(Date.now()));
        },
		onShow() {
            if (!this.searchParams.workshopId) {
                this.$set(this.searchParams, 'workshopId', getApp().globalData.defaultWorkshop.id);
                this.$set(this.searchParams, 'workshopName', getApp().globalData.defaultWorkshop.name);
            }
            this.workshopList = getApp().globalData.defaultWorkshop.list;
            this.getDependentData();
        },
		methods: {
            onConfirmOfMoreSearch(item) {
                this.searchParams = {
                    ...this.searchParams,
                    ...item
                };
                this.moreSearchState = false;
                this.$set(this.searchParams, 'pageNo', 1);
                this.getListRequest();
            },
            onToggleState(item, state, txt) {
                let _this = this;
                uni.showModal({
                    title: '提示',
                    content: `确定${txt}吗?`,
                    success(res) {
                        if (res.confirm) {
                            productionPrdNoticeUpdatePackageState({
                                id: item.id,
                                packageState: state
                            }).then(res => {
                                if (res.data.res) {
                                    _this.getListRequest();
                                }
                            })
                        }
                    }
                });
            },
            transferState(state) {
                let conf = this.packageStateList.find(x => x.id === state) || {};
                return conf;
            },
            setDate(val) {
                this.$set(this.searchParams, 'belongDate', formatDate(val));
            },
            onConfirmOfSelectPackage(e, item) {
                this.$set(this.searchParams, 'pageNo', 1);
                this.$set(this.searchParams, 'packageState', item.id);
                this.$set(this.searchParams, 'packageStateName', item.name);
                this.selectPackagePopupOptionState = false;
                this.getListRequest();
            },
            onConfirmOfSelectWorkshop(e, item) {
                this.$set(this.searchParams, 'pageNo', 1);
                this.$set(this.searchParams, 'workshopId', item.id);
                this.$set(this.searchParams, 'workshopName', item.name);
                this.selectWorkshopPopupOptionState = false;
                this.getListRequest();
            },
			onClearOfSearchIpt() {
				this.$set(this.searchParams, 'productNameOrCode', '');
				this.onSearchBtn();
			},
			onToPrintBtn(row) {
				uni.navigateTo({
					url: `/pages/production/packagePrd/packagePlan/toPrint?code=${row.code}`
				})
			},
			onSearchBtn(e) {
				this.tableData = [];
				this.$set(this.searchParams, 'productNameOrCode', e);
				this.getListRequest();
			},
			async getDependentData() {
				showLoading(true);
				this.searchParams.pageNo = 1;
				if (this.searchParams.workshopId) await this.getListRequest();
				showLoading(false);
			},
			getListRequest() {
				if (this.searchParams.workshopId) {
					showLoading(true);
                    this.searchParams.pageNo = 1;
                    let params = JSON.parse(JSON.stringify(this.searchParams));
                    delete params.workshopName;
                    delete params.workshopCode;
                    delete params.packageStateName;
                    delete params.totalCount;
					return this.apiConfig.list(params).then(res => {
						showLoading(false);
						if (res.data.status === 200) {
							this.$set(this.searchParams, 'totalCount', res.data.count);
							this.tableData = res.data.res;
							this.isNoMore = isLastPage(this.searchParams.totalCount, this.searchParams.pageSize, this.searchParams.pageNo);
						}
					})
				}
			}
		},
		onReachBottom() {
			this.getMore();
		}
	}
</script>

<style lang="scss" scoped>
</style>
